<template>
  <div>
    <div class="hshheader">
      <img :src="heslist?.bgimg" alt="" style="width:100%;height:100%;object-fit: cover;z-index: 1;">
      <img src="~/static/zhuti/heback.png" alt=""
        style="width:3.5rem;height:2.75rem;position:absolute;top:2rem;left:0.5rem;z-index: 9999;" @click="goBack">
      <div
        style="display:flex;align-items:center;z-index:3;justify-content:space-between;position:absolute;top:6.5rem;left:0.5rem;">
        <div style="display:flex;align-items:center;">
          <img :src="heslist.icon" alt="" style="width:3.75rem;height:3.75rem;border-radius:.75rem;;">
          <div style="margin-left:.75rem;">
            <div style="font-weight: bold;font-size: 1rem;color: #FFFFFF;">{{heslist.name}}</div>
            <div style="font-size: .625rem;color: #F2F3F5;font-weight: 500;margin:.3125rem;">{{heslist.guanzhu_num}}人已加入论坛
            </div>
            <div style="font-size: .75rem;color: #E4E5E6;font-weight: 500;">最近更新：{{heslist.new_time}}</div>
          </div>
        </div>
        <div class="jiaru" v-if="heslist.is_guanzhu==true">已加入</div>
        <div class="jiaru" v-if="heslist.is_guanzhu==false" @click="gojairu">+加入</div>
      </div>
    </div>
    <div class="hestabs">
      <div v-for="(item, index) in heslist.fenlei" :key="index"
        :class="tabtype == index? 'hestabs-tab_active' : 'hestabs-tab'   " @click="gotabs(item.type,index)">{{item.name}}
      </div>
    </div>
    <div v-if="tabtype==0" style="margin: 1rem .75rem;">
      <div class="heshenhuacontent">
        <div v-for="(item, index) in heslist.news" :key="index" @click="gotonews(item)"
          style="display:flex;align-items:center;margin: 1rem 0;justify-content: space-between;">
          <div style="display: flex;align-items: center;">
            <img src="~/static/zhuti/gongnue.png" alt="" style="width:1.625rem;height:.875rem;margin-right:.5rem;">
          <div style="font-size: .875rem;font-weight: 500;color: #2E3033; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; width:257px;">{{item.title}}</div>
          </div>
        
          <img src="~/static/index/Component 167@2x.png" alt="" style="width: 14px;height: 14px;object-fit: cover;">
        </div>
      </div>
      <div style="display:flex;align-items:center;margin:1.125rem;justify-content:space-between;">
        <div style="color: #333333;font-size: .875rem;font-weight:bold;">全部帖子</div>
        <!-- <div class="pinghuan"></div> -->
      </div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in yinyuankang.data" :key="index"
          style="background-color: #ffffff;border-radius:.75rem;margin-top:1.375rem;padding:1rem .75rem;">
          <div>
            <div style="display: flex;">
              <img :src="item.face" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit: cover;">
              <div style="margin-left:.75rem;width:60%">
                <div style="display:flex;align-items:center;">
                  <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{item.biaoqian}}</div>
                  <img src="~/static/guangchang/userbadge.png" alt=""
                    style="width:2.8125rem;height: .75rem;margin-left:.25rem;">
                </div>
                <div style="font-size: 11px;color: #AEB0B3;margin-top: -5px;">{{item.time}}</div>
                <div style="  font-weight: bold;
                              font-size: .9375rem;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              width: 200px; /* Or any specific width */
                              max-width: 100%;" >
                              {{item.title}}
                </div>
                <div v-if="item.content" style="width:140%;font-size:.9375rem">
                  {{item.content}}
                </div>
                <div style="margin-top: .4125rem;" v-if="item.video">
                  <iframe :src="item.video" width="100%" frameborder="0" allowfullscreen="true"
                    style="border-radius: .9375rem;"></iframe>
                </div>
                <div class="image-gallery" style="margin-top:.625rem" v-if="item.image">
                  <img @click="showImage(img)" v-for="(img, idx) in  item.image" :key="idx" :src="img"
                    :alt="'Image ' + (idx + 1)" :style="getImageStyle( item.image.length)"
                    :class="getImageClass(idx,  item.image.length)" />
                </div>
              </div>
              <!-- <div class="guanzhu">+&nbsp;关注</div> -->
            </div>
  
            <div
              style="display: flex;align-items: center;justify-content: center;margin-top: .8925rem;justify-content: space-between;">
              <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                <img src="~/static/zixun/basic1.png" alt="" style="width: 1.0625rem;height: 1rem;">
                <div style="color: #7B7D80;font-size: .625rem;">{{item.look}}浏览</div>
              </div>
              <div style="display:flex;align-items: center;jsutify-content: center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                  <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.pinglun}}评论</div>
                </div>
                   <div
                  style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left:.875rem;" @click="godianzan(item.id)">
                 <img v-if="item.is_good == false" src="~/static/zixun/xzax1.png" alt="" style="width: 1.0625rem;height: 1rem">
                    <img v-if="item.is_good== true" src="~/static/zixun/xzax.png" alt="" style="width: 1.0625rem;height: 1rem">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.zan}}点赞</div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <div v-if="tabtype==1" style="margin: 1rem .75rem;">
      <div v-for="(item, index) in yinyuankang.blocks" :key="index" style="margin-top: 1rem;">
        <div v-if="item.image == 1">
          <div style="font-weight: bold;font-size: .8125rem;color: #2E3033;">{{item.name}}</div>
          <div style="display:flex;align-items:center;  overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* IE and Edge */">
            <div class="heshtgonn" v-for="(tel,indexs) in item.news" :key="indexs" @click="gotonews(tel)">
              <img :src="tel.image" alt=""
                style="width: 6.5rem;height: 8.0625rem;background: rgba(0,0,0,0.1);border-radius: .5rem;object-fit: cover;">
              <div style="font-weight: bold;font-size: .8125rem;color: #47494D;margin-top:.5rem; white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width:100%;text-aglin:center;">{{tel.title}}</div>
            </div>
          </div>
        </div>
        <div v-if="item.image == 0">
          <div style="font-weight: bold;font-size: .8125rem;color: #2E3033;background: #F7F8FA;  padding: .5rem;">
            {{item.name}}</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;margin:1.125rem;justify-content:space-between;">
        <div style="color: #333333;font-size: .875rem;font-weight:bold;">用户动态</div>
      </div>
       <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in yinyuankang.data" :key="index"
          style="background-color: #ffffff;border-radius:.75rem;margin-top:1.375rem;padding:1rem .75rem;">
          <div>
            <div style="display: flex;">
              <img :src="item.face" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit: cover;">
              <div style="margin-left:.75rem;width:60%">
                <div style="display:flex;align-items:center;">
                  <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{item.biaoqian}}</div>
                  <img src="~/static/guangchang/userbadge.png" alt=""
                    style="width:2.8125rem;height: .75rem;margin-left:.25rem;">
                </div>
                <div style="font-size: 11px;color: #AEB0B3;margin-top: -5px;">{{item.time}}</div>
                <div style="  font-weight: bold;
                              font-size: .9375rem;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              width: 200px; /* Or any specific width */
                              max-width: 100%;" >
                              {{item.title}}
                </div>
                <div v-if="item.content" style="width:140%;font-size:.9375rem">
                  {{item.content}}
                </div>
                <div style="margin-top: .4125rem;" v-if="item.video">
                  <iframe :src="item.video" width="100%" frameborder="0" allowfullscreen="true"
                    style="border-radius: .9375rem;"></iframe>
                </div>
                <div class="image-gallery" style="margin-top:.625rem" v-if="item.image">
                  <img @click="showImage(img)" v-for="(img, idx) in  item.image" :key="idx" :src="img"
                    :alt="'Image ' + (idx + 1)" :style="getImageStyle( item.image.length)"
                    :class="getImageClass(idx,  item.image.length)" />
                </div>
              </div>
              <!-- <div class="guanzhu">+&nbsp;关注</div> -->
            </div>
  
            <div
              style="display: flex;align-items: center;justify-content: center;margin-top: .8925rem;justify-content: space-between;">
              <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                <img src="~/static/zixun/basic1.png" alt="" style="width: 1.0625rem;height: 1rem;">
                <div style="color: #7B7D80;font-size: .625rem;">{{item.look}}浏览</div>
              </div>
              <div style="display:flex;align-items: center;jsutify-content: center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                  <img src="~/static/zixun/basic2.png" alt="" style="width: 1.0625rem;height: 1rem;">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.pinglun}}评论</div>
                </div>
                   <div
                  style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left:.875rem;" @click="godianzan(item.id)">
                 <img v-if="item.is_good == false" src="~/static/zixun/xzax1.png" alt="" style="width: 1.0625rem;height: 1rem">
                    <img v-if="item.is_good== true" src="~/static/zixun/xzax.png" alt="" style="width: 1.0625rem;height: 1rem">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.zan}}点赞</div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <div  v-if="tabtype==2||tabtype==3">
      <div  style="display: flex;">
         <div style="margin:50%  auto;display: flex;flex-direction: column;align-items: center;justify-content: center;"> 
        <img src="https://static-tool.77.top/static/null-image.png" alt=""  style="width:180px;height:180px;"     >
        <div style="color: #2E3033;font-weight: bold;margin-top: 15px;"v-if="tabtype==2" >暂无官方消息哦~</div>
        <div style="color: #2E3033;font-weight: bold;margin-top: 15px;"v-if="tabtype==3" >暂无活动消息哦~</div>
      </div>
        </div></div>
  </div>
</template>

<script>
import md5 from 'js-md5';

export default {
  data() {
    return {
      uid: '',
      id: '',
      textToHash: '',
      hasRequested: false,
      t: '',
      page: 1,
      heslist: '',
      tabtype: '',
      yinyuankang: '',
      loading: false,
      finished: false,
      telimages: ['https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-3.jpg'],
      heishenid: ''
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.uid = this.getCookie('loginnew');
    this.t = Date.now();
    const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    this.hasRequested = true;
    if(this.$route.query.typs==1){
      this.tabtype=1
       this.gotabs(3,1)
    }else{
      this.gotabs(4, 0)
    }
    this.hewukong()

  },
  methods: {
      async  godianzan(e){
         const params = {
        ct: 'shequ',
        ac:'good',
        pid:e,
        sign:this.textToHash,
        t:this.t,
        type:0,
        uid:this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.page=1
      this.loading = false;
      this.tiezi()
    },
    getImageStyle(count) {
      let width, height;
      if (count === 1) {
        width = '270px';
        height = '152px';
      } else if (count === 2) {
        width = '230px';
        height = '83px';
      } else {
        width = '89px';
        height = '89px';
      }
      return { width, height };
    },
    getImageClass(index, count) {
      const rowIndex = Math.floor(index / 3);
      const colIndex = index % 3;

      let className = '';
      if (count === 2) {
        if (index === 1) {
          return 'rounded-top-right';
        }
      }
      if (count === 9) {
        if (rowIndex === 0) { // First row
          if (colIndex === 0) {
            className = 'rounded-top-left';
          } else if (colIndex === 2) {
            className = 'rounded-top-right';
          }
        } else if (rowIndex === 2) {
          if (colIndex === 0) {
            className = 'rounded-bottom-left';
          } else if (colIndex === 2) {
            className = 'rounded-bottom-right';
          }
        }
      } else if (count === 1) {
        className = 'rounded';
      } else {
        if (rowIndex === 0 && colIndex === 0) {
          className = 'rounded-top-left';
        } else if (rowIndex === 0 && colIndex === 2) {
          className = 'rounded-top-right';
        } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 0) {
          className = 'rounded-bottom-left';
        } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 2) {
          className = 'rounded-bottom-right';
        } else {
          className = colIndex === 0 ? 'rounded-left' : colIndex === 2 ? 'rounded-right' : '';
        }
      }

      return className;
    },
    showImage(e) {
      this.$showImageModal(e)
    },
    gotonews(e) {
      if(e.id==undefined){
        e.id=e.news_id
      }
      this.$router.push({  
        path: '/news/raiders?id=' + e.id + '&title='+ e.title 
     });
    },
    getImageStyle(count) {
      let width, height;
      if (count === 1) {
        width = '230px';
        height = '152px';
      } else if (count === 2) {
        width = '230px';
        height = '83px';
      } else {
        width = '69px';
        height = '69px';
      }
      return { width, height };
    },
    getImageClass(index, count) {
      if (count === 1) {
        return 'rounded';
      }
      if (count === 2) {
        // For two images, apply specific rounded corners
        return index === 0 ? 'rounded-left' : 'rounded-right';
      }
      // For more than two images
      return 'rounded';
    },
    goBack() {
      this.$router.back();
    },
    onLoad() {
      setTimeout(() => {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
          this.tiezi();
        } else {
          this.finished = true;
        }
      }, 500);
    },
    async gojairu() {
      const params = {
        ct: "shequ",
        ac: "guanzhu",
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
        id: this.id,
      };
      const response = await this.$axios.get('api/app/v3', { params });
      this.loading = false;
      this.hewukong()

    },
    async gotabs(e, a) {
      this.page = 1
      this.heishenid = e
      this.tabtype = a
      this.tiezi()
    },
    async tiezi() {
      const params = {
        ct: 'shequ',
        ac: 'news',
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
        id: this.id,
        type: this.heishenid,
        p:this.page
      };
      const response = await this.$axios.get('api/app/v3', { params });
      if (this.page == 1) {
        this.yinyuankang = response.data;
      } else {
        this.yinyuankang.data = this.yinyuankang.data.concat(response.data.data);
      }
      this.loading = true;
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
    async hewukong() {
      const params = {
        ct: 'shequ',
        id: this.id,
        ac: 'index',
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
      };
      try {
        const response = await this.$axios.get('api/app/v3', { params });
        this.heslist = response.data.data;
        this.loading = false;
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
  },
};
</script>
<style>
body {
  background: #F7F8FA !important;
  font-size: 16px;
  /* 默认字体大小 */
}</style>
<style scoped>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5rem;
  gap: 2px;
  justify-content: left;
}

.image-gallery img {
  object-fit: cover;
  /* 保持图片比例 */
}

.rounded {
  border-radius: 8px;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rounded-top-left {
  border-top-left-radius: 8px;
}

.rounded-top-right {
  border-top-right-radius: 8px;
}

.rounded-bottom-left {
  border-bottom-left-radius: 8px;
}

.rounded-bottom-right {
  border-bottom-right-radius: 8px;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5rem;
  gap: 2px;
  /* 图片之间的间距 */
  justify-content: left;
  /* 图片左对齐 */
}

.image-gallery img {
  object-fit: cover;
  /* 保持图片比例 */
}

.rounded {
  border-radius: 8px;
  /* 默认圆角 */
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.hshheader {
  height: 11.25rem;
  /* position: relative; */
  /* background: #FFFFFF;
  opacity: 45%; */
  z-index: -1;
}

.jiaru {
  width: 4.125rem;
  height: 1.875rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4.25rem;
  line-height: 1.875rem;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  font-size: .875rem;
  margin-left: 2.5rem;
}

.hestabs {
  display: flex;
  align-items: center;
  margin: 1rem .75rem;
}

.hestabs-tab {
  width: 3rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: .75rem;
  color: #2E3033;
  font-weight: bold;
}

.hestabs-tab_active {
  background: #ffffff;
  width: 3rem;
  height: 1.5rem;
  box-shadow: .0625rem .0625rem .1875rem 0px rgba(0, 0, 0, 0.04);
  border-radius: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: .75rem;
  color: #2E3033;
  font-weight: bold;
  box-shadow: .0625rem .0625rem .1875rem 0px rgba(0, 0, 0, 0.04);
}

.heshenhuacontent {
  background: #FFFFFF;
  border-radius: .75rem;
  padding:0 1rem;
  overflow: hidden;
}

.guanzhu {
  width: 4.125rem;
  height: 1.625rem;
  border-radius: 4.25rem;
  border: 1px solid #2E3033;
  text-align: center;
  line-height: 1.625rem;
  font-weight: bold;
  margin-left: 4rem;
}

.heshtgonn {
  background: #F7F8FA;
  border-radius: .75rem;
  margin-right: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: .5rem;
  margin-top: .75rem;
}
</style>
